<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="myApp">
        <h1>{{msg}}</h1>
        <!-- 文本插值 -->
        <input type="text" v-model="msg">
        <hr>
        <input type="text" v-model="num1">+
        <input type="text" v-model="num2">=
        <span>{{Number(num1)+Number(num2)}}</span>
        <br>
        <input type="text" v-model="num3">-
        <input type="text" v-model="num4">=
        <span>{{num3-num4}}</span>
        <br>
        <input type="text" v-model="num5">*
        <input type="text" v-model="num6">=
        <span>{{num5*num6}}</span>
        <br>
        <input type="text" v-model="num7">/
        <input type="text" v-model="num8">=
        <span>{{num7/num8}}</span>
    </div>
<!-- <div class="myApp2">
        <hr>
        <p>我是{{msg2}}</p>
        <input type="text" v-model="num1">
        <input type="text" v-model="num2">
        <p>num1 * num2 = {{num1*num2}}</p>
    </div> -->
    <script id="template" type="x-template">
        <div class="div-out">
            <div class="div-in">
                <ul>
                    <li class="li1">{{num1}}</li>
                    <li class="li2">{{num2}}</li>
                </ul>
                <select name="" id="">
                    <option value="1">A</option>
                    <option value="2">B</option>
                </select>
            </div>
            <div class="div-in">
                <p>123456</p>
            </div>
        </div>
    </script>
    <script src="./js/vue.js"></script>
    <script>
        let vm=new Vue({
            //el: element元素
            el: '.myApp',
            data: {
                msg: 'hello vue',
                num1:111,
                num2:222,
                num3:0,
                num4:0,
                num5:0,
                num6:0,
                num7:0,
                num8:1
            },
            template: `#template`
        })
        //let vm2=new Vue({
        //    el: '.myApp2',
        //    data:{
        //        msg2: 'myApp2',
        //        num1:0,
        //        num2:0
        //    }
        //})
    </script>
</body>
</html>